<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我们的宠物</title>
    <script type="text/javascript" src="https://www.xuhxin.cn/file/Personal-home-page/assets/js/shubiao.js"></script>
    <style type="text/css">
        .swiper1{
            width: 600px;
            height: 400px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div style="text-align: center;">
        <h2 class="h">点点</h2>
        <p class="h">在城市的缝隙中，点点如夜色般悄无声息地穿梭，它那深邃的眼眸藏着无尽的故事，黑影中透露出温柔与坚强，是夜的诗人，也是梦的旅者。</p>
        <div style="display: inline-block;" class="h sh">
            <div class="swiper swiper1"></div>
        </div>
    </div>
    <img class="mouse" src="https://www.xuhxin.cn/file/Personal-home-page/123.png" alt="">
 <style>
         *{
            margin: 0;
            padding: 0;
            box-sizing:border-box;
            cursor: none;    
            background: linear-gradient(to top, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898; background-blend-mode: multiply,multiply;     
        }

        .mouse{
        width: 50px;
        height: 50px;
        border-radius: 50%;;
        position: fixed;
        left: -200px;
        z-index: 1000;
        pointer-events: none;
    }

    </style>
    <script>
         var mouse = document.querySelector('.mouse');
    window.addEventListener('mousemove',function(event){    
        mouse.style.left = event.clientX - mouse.offsetWidth/2 + 'px' ;
        mouse.style.top = event.clientY -mouse.offsetHeight/2 + 'px';       
    })
    </script>

    <script type="text/javascript">
        fetch('./index.json', {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json'
        }
        })
        .then(response => {
        if (response.ok) {
            return response.json(); // 将响应数据转换为JSON
        }
        throw new Error('Network response was not ok.');
        })
        .then(jsonData => {
            var imgList=jsonData.list
            var swiper1=new Swiper(".swiper1",imgList);//构造对象的函数，工厂模式
        })
    </script>
    <script type="text/javascript">
        class Swiper{
            constructor(selector,imgList) {
                var swiperDiv=document.querySelector(selector);
                function createSwiperHtml(imgList){
                    var imgListDiv=document.createElement("div");
                    var circleListDiv=document.createElement("div");
                    imgListDiv.className="imgList";
                    circleListDiv.className="circleList"
                    imgList.forEach(function(item,i){
                        if(i==0){
                            imgListDiv.innerHTML=imgListDiv.innerHTML+'<div class="imgItem active" style="background-image: url('+item.url+');"></div>'
                            circleListDiv.innerHTML=circleListDiv.innerHTML+'<div class="circle active" id="c'+i+'"></div>'
                        }else{
                            imgListDiv.innerHTML=imgListDiv.innerHTML+'<div class="imgItem" style="background-image: url('+item.url+');"></div>'
                            circleListDiv.innerHTML=circleListDiv.innerHTML+'<div class="circle" id="c'+i+'"></div>'
                    }
                    })
                    swiperDiv.appendChild(imgListDiv);
                    swiperDiv.appendChild(circleListDiv);
                    swiperDiv.innerHTML+=`<div class="btnList">
                            <div class="btn pre"></div>
                            <div class="btn next"></div>
                        </div>`
                }
                createSwiperHtml(imgList);
                this.btnpre=document.querySelector(selector+" .pre");
                this.btnnext=document.querySelector(selector+" .next");
                this.imgListDiv=document.querySelectorAll(selector+" .imgItem");
                this.circleList=document.querySelectorAll(selector+" .circle")
                this.currentImg=0;  //每次点击现在的图片索引加1
                this.btnpre.innerHTML = "上一张"
                this.btnnext.innerHTML = "下一张"
                var that = this;
                this.btnnext.onclick=function(){
                    console.log('123');
                    
                    that.forward();
                    
                }
                this.btnpre.onclick=function(){
                    that.back();
                }
                
                
                this.circleList.forEach(function(item,i){
                    item.onclick=function(){
                        that.go(i);
                    }
                })
            }
            switchImg(){
                //初始化，将所有图片的active去掉
                this.imgListDiv.forEach(function(item,i){
                    item.classList.remove("active")
                })
                
                this.circleList.forEach(function(item,i){
                    item.classList.remove("active")
                })
                this.circleList[this.currentImg].classList.add("active")
                this.imgListDiv[this.currentImg].classList.add("active")
            }
            go(index){
                this.currentImg=index;        
                this.switchImg();
            } 
            
            forward(){
                this.currentImg++;
                console.log(this.imgListDiv.length,"岁的法国士大夫");
                
                if(this.currentImg>=this.imgListDiv.length){
                    this.currentImg=0;
                }
                this.switchImg();
            }
            back(){
                this.currentImg--;
                if(this.currentImg<0){
                    this.currentImg=this.imgListDiv.length-1;
                }
                this.switchImg();
            }
        }
    </script>
</body>
<style>
.h {
    margin: 2rem;
}
.sh {
    box-shadow:15px 15px 8px -12px #000;
}
.swiper{
	width: 20rem;
	height: 20rem;
	margin: 0 auto;
	position: relative;
}
.swiper .imgList{
	width: 100%;
	height: 100%;
	position: relative;
}

.swiper>.imgList>.imgItem{
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	transition:all 0.5s;
}
.swiper>.imgList>.imgItem.active{
	opacity: 1;
}
.swiper .btn.pre{
	width: 2rem;
	height: 2rem;
	line-height: 2rem;
	text-align: center;
	background: linear-gradient(to top, #09203f 0%, #537895 100%);;
	color: #FFFFFF;
	position: absolute;
	top: calc(50% - -11rem);
    left: 0rem;
	font-size: 0.5rem;
	transition: all 0.3s;
    box-shadow:6px 6px 15px 0px #000;
}
.swiper .btn.pre:hover{
background-color: rgba(0,0,0,0.6);
}

.swiper .btn.next{
	width: 2rem;
	height: 2rem;
	line-height: 2rem;
	text-align: center;
	background: linear-gradient(to top, #09203f 0%, #537895 100%);;
	color: whitesmoke;
	position: absolute;
	right: 0;
	top: calc(50% - -11rem);
    right: 0rem;
	font-size: 0.5rem;
	transition: all 0.3s;
    box-shadow:6px 6px 15px 0px #000;
}
.swiper .btn.next:hover{
	background-color: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);;
}
.circleList{
	width: 100%;
    height: 3rem;
	display: flex;
	padding: 0;
    z-index: 999;
	justify-content: flex-end;
	align-items: center;
	position: absolute ;
    background: transparent;
	left: -6rem;
	bottom: 0;
}
.swiper>.circleList>.circle{
	width: 0.7rem;
	height: 0.3rem;
	border: 0.1rem solid #999999;
	background-color: #666;
	border-radius: 5px;
	margin: 0 5px;
}
.swiper>.circleList>.circle.active{
	background-color: #ccc;
	border: 2px solid #666666;
}

</style>
</html>